<!-- 上传人员名单_左侧弹窗 -->
<template>
  <div class="uploadPersonnel">
    <div class="uploadPersonnel_form">
      <div class="uploadPersonnel_form_box">
        <div class="uploadPersonnel_form_box_top">
          <!-- 选择合同 -->
          <div class="lable">1、选择合同</div>
          <el-select v-model="contract" placeholder="请选择合同" @change="changeContract">
            <el-option v-for="item in contractOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>

          <!-- 合同信息 -->
          <div class="uploadPersonnel_form_box_top_info">
            <div class="uploadPersonnel_form_box_top_info_item">
              <span>合同名称：</span>
              <span>{{ contractList[contractIndex] && contractList[contractIndex].name !== '' ? contractList[contractIndex].name : '-' }}</span>
            </div>
            <div class="uploadPersonnel_form_box_top_info_item">
              <span>合同编号：</span>
              <span>{{ contractList[contractIndex] && contractList[contractIndex].code !== '' ? contractList[contractIndex].code : '-' }}</span>
            </div>
            <div class="uploadPersonnel_form_box_top_info_item">
              <span>合同期限：</span>
              <span><span>{{ contractList[contractIndex] && contractList[contractIndex].startTime !== '' ? contractList[contractIndex].startTime : '' }}</span>至<span>{{ contractList[contractIndex] && contractList[contractIndex].endTime !== '' ? contractList[contractIndex].endTime : '' }}</span></span>
            </div>
            <div class="uploadPersonnel_form_box_top_info_item">
              <span>实际用工地：</span>
              <span>{{ contractList[contractIndex] && contractList[contractIndex].actualConstructionCityName !== '' ? contractList[contractIndex].actualConstructionCityName : '-' }}</span>
            </div>
<!--            <div class="uploadPersonnel_form_box_top_info_item">-->
<!--              <span>服务费：</span>-->
<!--              <span>{{ contractList[contractIndex] && contractList[contractIndex].serverMoney !== '' ? contractList[contractIndex].serverMoney : '-' }}</span>-->
<!--            </div>-->

            <!-- <div class="uploadPersonnel_form_box_top_info_item">
              <span>岗位：</span>
              <span>
                <em v-for="(item, index) in jobList" :key="index">{{ index == jobList.length - 1 ? item.name : item.name + '、' }}</em>
              </span>
            </div> -->
          </div>
        </div>

        <!-- 右侧表单，选择月份和上传文件 -->
        <!-- 上传 -->
        <div class="uploadPersonnel_form_box_upload">
          <div class="lable">2、上传人员名单</div>
          <div class="uploadPersonnel_form_box_upload_content">
            <el-upload ref="upload" class="el-upload" drag :on-change="onChange" accept=".xlsx" :http-request="httpRequest" :file-list="fileList" :auto-upload="false" :action="uploadUrl" :limit="1">
              <div class="el-upload__text">将人员名单文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </div>
        </div>

        <!-- 选择月份 -->
        <div class="uploadPersonnel_form_box_picker">
          <div class="lable">3、选择投保日期</div>
          <el-date-picker v-model="month" type="date" placeholder="请选择投保日期" :editable="false" :clearable="false" :picker-options="validTimeOption" value-format="yyyy-MM-dd" />
        </div>

        <div class="uploadPersonnel_form_box_btn">
          <el-button type="primary" :loading="btnLoading" :disabled="openStatus === 0" @click="submit">确认上传</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { uploadFile } from '@/api/insure'
import { getAgreement, getAgreementPosition } from '@/api/contract'
import { checkOpen } from '@/api/setting'
import url from '@/utils/URL'
export default {
  name: 'UploadPersonnel',
  data() {
    return {
      validTimeOption: {
        disabledDate(time) {
          var times = Date.now()
          return time.getTime() <= times
        }
      },
      contract: '', // 合同value
      contractId: '', // 合同id
      contractIndex: '', // 合同下标
      contractList: [], // 合同列表
      contractOptions: [], // 合同下拉列表
      month: '', // 月份
      fileList: [], // 上传文件列表
      uploadUrl: url.target,

      jobList: [], // 岗位列表
      btnLoading: false, // 确认上传按钮loading,
      // 投保开始状态 0为未开启，1已开启
      openStatus: 0
    }
  },
  created() {
    this.getContractList()
    console.log(this.uploadUrl, 'uploadUrl')
    this.checkOpenMethod()
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },

    // 上传文件
    onChange(file, fileList) {
      // console.log(file, fileList)
      this.fileList = fileList
      // console.log(file)
    },

    // 验证合同和月份和文件不为空
    validate() {
      if (this.contract === '') {
        this.$message.warning('请选择合同')
        return false
      }
      if (this.fileList.length === 0) {
        this.$message.warning('请上传文件')
        return false
      }
      if (this.month === '') {
        this.$message.warning('请选择月份')
        return false
      }
      return true
    },

    // 自定义上传
    httpRequest(params) {
      // console.log(params)
      const fd = new FormData()
      fd.append('file', params.file)
      fd.append('agreementId', this.contractId)
      fd.append('insuranceDate', this.month)

      uploadFile(fd).then(res => {
        // console.log(res)
        this.btnLoading = false
        if (res.code === 200) {
          // 如果有失败人员，弹窗下载失败人员名单
          if (res.data.errorNum > 0) {
            this.$notify({
              title: '警告',
              message: '共上传' + res.data.totalNum + '人，有' + res.data.errorNum + '人信息不符，请下载名单修改后再上传。',
              type: 'warning',
              duration: 0,
              offset: 100
            })
          } else {
            this.$message.success('上传成功')
          }
          // 清空文件列表
          this.$refs.upload.clearFiles()
          this.fileList = []
          // 关闭弹窗
          this.$emit('closeDrawerUpload')
        }
      })
    },

    // 确认上传
    submit() {
      if (!this.validate()) return
      this.btnLoading = true
      this.$refs.upload.submit()
    },

    // 获取合同列表
    getContractList() {
      getAgreement({
        status: 0
      }).then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.contractList = res.data
          this.contractOptions = res.data.map(item => {
            return {
              value: item.id,
              label: item.name
            }
          })
          // eslint-disable-next-line no-unused-vars
          for (var item of this.contractList) {
            if (item.actualConstructionProvinceName && item.actualConstructionCityName) {
              item.actualConstructionCityName = item.actualConstructionProvinceName + '-' + item.actualConstructionCityName
            }
          }
        }
      })
    },

    // 选择合同
    changeContract() {
      // console.log(typeof this.contract)
      // console.log(this.contract)
      // console.log(this.contractList)
      this.contractIndex = this.contractList.findIndex(item => item.id === this.contract)
      this.contractId = this.contract
      console.log(this.contractId)
      this.jobList = []
      this.getPositionList()
    },

    // 获取岗位列表
    getPositionList() {
      getAgreementPosition({
        agreementId: this.contractId,
        pageSize: 30
      }).then(res => {
        // console.log(res, '岗位列表')
        if (res.code === 200) {
          this.jobList = res.rows
        }
      })
    },

    // 检查开启状态
    checkOpenMethod() {
      var that = this
      checkOpen().then(res => {
        if (res.code === 200 && res.data.status === 1) {
          that.openStatus = res.data.status
        } else {
          that.$message.error({ message: res.msg })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.uploadPersonnel {
  width: 100%;
  margin: 30px auto 0;

  &_form {
    &_box {
      display: flex;

      .lable {
        font-size: 14px;
        line-height: 1;
        font-weight: 400;
        color: #343434;
        margin-bottom: 10px;
      }

      &_top {
        width: 360px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        margin-right: 30px;

        &_info {
          width: 100%;
          border-radius: 6px;
          margin-top: 10px;
          background-color: #f8f8f8;
          padding: 20px 15px;

          &_item {
            font-size: 14px;
            line-height: 1;
            color: rgb(52, 52, 52);
            margin-bottom: 5px;
            text-align: justify;

            &:last-child {
              margin-bottom: 0;
            }

            span {
              line-height: 1.5;

              em {
                font-style: normal;
              }
            }
          }
        }
      }

      // 上传文件
      &_upload {
        width: 360px;
        // height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 30px;

        &_content {
          width: 100%;
          height: 320px;
          flex: 1;
          border-radius: 6px;
          background-color: #ffffff;
          border: 1px solid #DCDFE6;
          padding: 0 20px;
        }
      }

      // 选择月份
      &_picker {
        width: 360px;
        display: flex;
        flex-direction: column;

        .el-date-editor {
          width: 100%;
        }
      }

      // 确认上传按钮
      &_btn {
        width: 120px;
        margin-top: 24px;
        margin-left: 30px;
      }

    }
  }
}
</style>

<style lang="scss">
.uploadPersonnel {

  // 上传
  .el-upload {
    width: 100%;
    height: 85%;

    .el-upload-dragger {
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 1);
      border: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .el-upload__text {
        margin-top: 50px;

        em {
          margin-left: 5px;
        }
      }
    }
  }

  .el-select {
    .el-input {
      width: 100%;
    }
  }
}
</style>
